<template>
	<view class="page">
		<xzfx-panel title="求购人信息" isCard>
			<view class="xzfx-form" slot="content">
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">求购人</view>
					<view class="xzfx-form-value">
						<input v-model="form.contackName" type="text" maxlength="100" placeholder="请输入求购人姓名" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">联系电话</view>
					<view class="xzfx-form-value">
						<input v-model="form.contackPhone" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">期望交易地</view>
					<view class="xzfx-form-value xzfx-form-custom" @click.stop="getMap">
						<view v-if="form.location" class="input-val">{{ form.location || "" }}</view>
						<view v-else class="input-val placeholder">请选择期望交易地</view>
						<view class="input-icon xzfx_icon_location"></view>
					</view>
				</view>
				<!-- <view v-if="form.address" class="xzfx-form-item">
					<view class="xzfx-form-label required">详细地址</view>
					<view class="xzfx-form-value">
						<input v-model="form.location" type="text" maxlength="100" placeholder="请输入详细地址" placeholder-class="placeholder">
					</view>
				</view> -->
			</view>
		</xzfx-panel>
		<xzfx-panel title="意向车辆信息" isCard>
			<view class="xzfx-form" slot="content">
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">品牌</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.truckBrand" mode="selector" title="品牌" placeholder="请选择车辆品牌" :range="$dict('truckBrand')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">车型</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.truckType" mode="selector" title="车型" placeholder="请选择车型" :range="$dict('truckType')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">开始年份</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.productYearStart" title="开始年份" fields="year" mode="date" placeholder="请选择开始年份" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">结束年份</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.productYearEnd" title="结束年份" mode="date" fields="year" placeholder="请选择结束年份" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">最大马力</view>
					<view class="xzfx-form-value" style="display: flex;align-items: center;">
						<input v-model="form.maxPower" type="number" maxlength="3" placeholder="请输入最大马力" placeholder-class="placeholder" style="width: calc(100% - 100rpx);">
						<view style="text-align: right;width: 100rpx;font-size: 30rpx;">匹以上</view>
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">求购数量</view>
					<view class="xzfx-form-value" style="display: flex;align-items: center;">
						<input v-model="form.num" type="number" placeholder="请输入求购数量" maxlength="3" placeholder-class="placeholder" style="width: calc(100% - 40rpx);">
						<view style="text-align: right;width: 40rpx;font-size: 30rpx;">辆</view>
					</view>
				</view>
			</view>
		</xzfx-panel>
		<xzfx-panel title="其他要求" isCard>
			<textarea v-model="form.remark" class="other-requirement" slot="content" maxlength="100" placeholder="请输入其他要求(100字)" placeholder-class="placeholder" />
		</xzfx-panel>
		<view class="submit-button" @click.stop="$checkLogin(submitFn)">提 交 求 购</view>
	</view>
</template>

<script>
	const chooseLocation = requirePlugin('chooseLocation');
	export default {
		data() {
			return {
				form: {
					contackName: "",
					contackPhone: "",
					province: "",
					city: "",
					district: "",
					location: "",
					truckBrand: "",
					truckType: "",
					productYearStart: "",
					productYearEnd: "",
					maxPower: "",
					num: "",
					remark: ""
				},
				tips: {
					contackName: "请输入联系人",
					contackPhone: "请输入预约电话",
					location: "请选择期望交易地",
					truckBrand: "请选择车辆品牌",
					truckType: "请选择车型",
					productYearStart: "请选择开始年份",
					productYearEnd: "请选择结束年份",
					maxPower: "请输入最大马力",
					num: "请输入求购数量"
				}
			};
		},
		onUnload () {
			chooseLocation.setLocation(null);
		},
		onShow() {
			const location = chooseLocation.getLocation();
			if(location){
				this.form.province = location.province;
				this.form.city = location.city;
				this.form.district = location.district;
				this.form.location = location.address + location.name;
			}
		},
		created() {
			this.getDict()
		},
		methods: {
			getMap(){
				let key = 'XKEBZ-XT6AM-UMS6B-6VEJQ-INKE6-UYFAH'; //使用在腾讯位置服务申请的key
				let referer = '百川海融小程序'; //调用插件的app的名称
				let location = {};
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						location = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						wx.navigateTo({
							url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + JSON.stringify(location)
						});
					},
					fail: (error) => {
						wx.navigateTo({
							url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + JSON.stringify(location)
						});
					}
				})
			},
			getDict(){
				this.$apis.config.setting({
					settingType: "color"
				}).then(res => {
					console.log(res)
				}).catch((error) => {
					console.log(error)
				})
			},
			submitFn(){
				let keys = Object.keys(this.tips);
				for (var i = 0; i < keys.length; i++) {
					if(!this.form[keys[i]]){
						this.$utils.system.tip(this.tips[keys[i]]);
						return
					}
				}
				if(!this.$utils.valid.phone(this.form.contackPhone)){
					this.$utils.system.tip("请输入合法的手机号");
					return
				}
				this.$utils.system.loading("正在提交，请稍后");
				this.$apis.wantBuy.submit(this.form).then(res => {
					this.$utils.system.tip('提交成功');
					Object.keys(this.form).forEach(item => {
						this.form[item] = ""
					})
					setTimeout(() => {
						uni.navigateBack({ delta: 1 });
					}, 3000);
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
					}, 3000)
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		padding-bottom: 50rpx;
	}
	.xzfx-form{
		padding-top: 20rpx;
		.xzfx-form-item{
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			border-top: 1rpx solid #f1f1f1;
			.xzfx-form-label{
				position: relative;
				width: 220rpx;
				padding-left: 18rpx;
				font-size: 30rpx;
				color: #333333;
			}
			.required::before{
				position: absolute;
				left: 0;
				content: "*";
				color: red;
			}
			.xzfx-form-value{
				width: calc(100% - 220rpx);
				input{
					text-align: right;
				}
			}
			.xzfx-form-custom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.input-val{
					width: calc(100% - 40rpx);
					font-size: 30rpx;
					color: #333333;
					text-align: right;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.input-icon{
					width: 40rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666666;
					font-size: 32rpx;
				}
			}
		}
		.xzfx-form-item:first-child{
			border-top: none;
		}
	}
	.other-requirement{
		width: 100%;
		height: 200rpx;
		margin-top: $xzfx-spacing;
	}
	.submit-button {
		margin: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 46rpx;
		background: $xzfx-theme;
		color: #FFFFFF;
		font-size: 32rpx;
		padding: 0 40rpx;
		overflow: hidden;
	}
</style>
